<!DOCTYPE html>
<html>

<head>
  <script src="../node_modules/angular/angular.js"></script>
</head>

<body ng-app="demo">
  <div ng-controller="DemoController">

    <button jf-permission="add">新增</button>
    <button jf-permission="delete">删除</button>
    <button jf-permission="edit">修改</button>
    <button jf-permission="query">查询</button>
  </div>
  <script>
    const demo = angular.module('demo', [])
    demo.directive('jfPermission', function factory() {
      return {
        restrict: 'A',
        link: function (scope, element, attrs) {
          if (!scope.auth[attrs.jfPermission]) {
            element.remove()
          }
        }
      }
    })
    demo.controller('DemoController', ['$scope', function ($scope) {
      $scope.auth = {
        add: true,
        delete: false,
        edit: false,
        query: true,
      }
    }]);
  </script>
</body>

</html>